iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
12
Modern Web

Angular Material完全攻略系列 第 1

[Angular Material完全攻略] Day 01 - 開始 & 簡介

  • 分享至 

  • xImage
  •  

從Angular第2版正式release後,根據全球最大工程師討論區StackOverflow的統計,從2016開始的Angular討論度就不斷竄升,甚至超越了React,直到了2017年,甚至擺脫了前一代Angularjs的陰影,躍升成為最熱門的前端議題!可以見得Angular這個前端框架確實具有它值得學習的地方,而在2017年底Angular正式邁向第5版,隔天Angular Material就從breaking changes不斷的beta版正式升到趨於穩定的rc版,沒幾個禮拜就直接正式release了!

一個是由Google推出的前端框架,一個是由Google推出的設計語言的Angular實作,兩者結合想必能加乘產生N倍以上的爆發力!接下來的日子,我們將一步一步地學會所有Angular Material的元件及特性、Angular CDK及一些進階的技巧,今天第一天就讓我們以比較輕鬆的節奏來認識所有的基礎知識吧!

Angular熱門趨勢

圖片來源:StackOverflow

關於Angular

Angular是由Google推出的前端框架,其熱門程度在前端領域的不用多說,佔有了非常重要的一席之地,有別於著重在view上的React或Vue這類library,Angular本身就是一個完整的MVC框架!由於整合了大部分前端常用的套件,開發人員只需要著重在學習如何使用Angular這個架構即可,對於剛入門前端或是由後端轉前端的人來說大幅降低了學習的曲線,如果本身已經有MVC架構的基本概念,學習上更是如虎添翼

Angular CLI

搭配Angular CLI,開發人員能夠以更簡單的方式產生一個基本的專案範本,同時只要下一些簡單的指令即可產生基本的程式碼架構;隨著Angular CLI逐漸的進步,開發的彈性也越來越高,例如@angular-devkit/schematics可以讓我們在團隊中建立共用的範本程式等等,讓開發速度大耀進!

TypeScript

Angular主要以TypeScript作為開發語言,TypeScript是JavaScript的超集合,能讓我們在開發JavaScript時能以強型別的方式撰寫程式,並在轉譯成JavaScript時自動檢查型別的錯誤,減少runtime時的debug成本;同時TypeScript能讓我們不斷享受使用最新的語法來撰寫程式的快感,只需要稍作設定即可把最新的語法轉為比較舊的語法,避免瀏覽器支援度的問題!也由於Angular開了這一槍,讓各種熱門的前端library/framework也陸陸續續有了TypeScript開發的版本,足見TypeScript對於前端世界的影響力也將越來越高!

基本門檻

由於本系列文章屬於稍微進階的Angular議題,因此對於Angular基礎的知識將不會有太多的介紹,建議讀者至少具備以下Angular基礎後,在閱讀本系列文章:

  1. 了解Angular的MVC架構
  2. 使用Angular CLI建立專案並開始開發
  3. 懂得如何設計並共用一個component
  4. 理解最基本的Angular相依注入的知識,並能實作一個service注入到component之中
  5. 有基本的模組化概念
  6. 能設定router完成SPA程式

就算沒有以上的知識,也完全不用擔心,網路上也有很多的參考資源,甚至還有中文版的文件,只要願意花個幾天時間,要對Angular有基本的認絕對不會是個問題!

當然,如果你有更多前端的相關知識如node、webpack等等,對於學習Angular或Angular Material絕對是加分的要素。

相關資源

關於Material Design

Material Design是由Google推出的設計語言,也可以把它想像成是一種設計的pattern,把視覺化設計的概念、網頁元件、操作互動等等理論及實作整理出來的設計準則,從元件的配色、陰影到特效都有一定的規則可循,我們能透過這些準則設計出清楚明確且容易使用的使用者介面(UI),打造更好的使用者經驗(UX);如果你是Google相關服務的愛用者,又對Material Design有點了解,相信你一定也有發現Google的各種服務在設計上也已經不斷朝Material Design邁進了。

Material Design的實作

由於Material Design僅僅只是一種設計的準則,不像bootstrap這類css framewrok,有直接的css樣式或javascript library可用,而是交由設計人員依照準則進行實作,偏偏Material Design的設計準則又非常多,一般開發人員不可能有時間依照這些準則一一設計,好在也有許依照Material Design的設計準則開發且open source的專案可用。例如Google官方推出的Material Design Lite和多平台都支援的
Material Components,或是由4個亞洲人合力開發出來的Materialize.css等等,都是目前常見的Material Desig實作版本。

當然像是React或Vue這類熱門的前端框架也很容易能夠找到相關的設計套件,透過這些實作套件,即使是沒有美感的前端工程師也能夠輕易設計出簡單大方,又不失設計感的頁面

而身為爸爸同樣是Google的Angular,有一套由官方推出的Material Design套件也不是件奇特的事情,也就是接下來要介紹的Angular Material

相關資源

關於Angular Material

Angular身為Google自家推出的主力前端框架,而Material Design又是Google未來設計的主要方向,自然而然的,也免不了要替Angular量身打造一套Material Design的套件,也就是本系列的主軸-Angular Mateial。

根據Angular Material官方的說法,Angular Material的目標是使用Angular及TypeScript打造出高品質的UI元件,同時這些元件必須遵守Material Design的設計標準。

高品質的Angular Material

所謂的高品質,對於Angular Material來說包含了以下幾個重點:

  • i18n及a11y:所有Angular Material提供的元件原則上都不會有無法支援多語系的情況,且同時也都能夠可存取性(a11y)的開發,讓所有使用者都能夠輕易與這些元件互動。
  • 直覺的API
  • 在大部分通用的情況下,是不會有bug的
  • 所有的元件都有撰寫良好的單元測試及整合測試
  • 可以依照Material Design準則客製化這些元件的細節
  • 高效能
  • 乾淨的程式碼且所有元件都有清楚的文件及範例

追求高品質的後果與成果

從上段介紹可以看到,Angular Material對於品質的要求,從程式碼本身到元件實用性都完全顧慮到了,如果能夠達到這樣的品質,絕對可以說是目前其他任何Material Deesign套件所望成莫及的程度!也因此不難想像在beta時期,Angular Material可以說是不斷的breaking change,想必就是為了能夠不斷的往所謂**「高品質」的目標邁進,這也成了很多想要進入Angular Material世界的人裹足不前的理由;儘管罵聲不斷,但朝著目標邁進的Angular Material在不斷進化的Angular推出第5版後,Angular Material的版本也從2.0.0-beta一下子大躍進為5.0.0-rc**!同時才幾個禮拜後的2017/12/06邁入正式版,在這個剛release的時候進入學習既能避免不斷breaking changes的傷害,又能夠 跟別人炫耀 贏在起跑點,實在是個很不錯的進入時機!這也成了這次鐵人賽想要以Angular Material為目標的主要原因!

系列文章規劃

本系列的文章將會以Angular Material的官方文件為主要依據,一步一步帶領讀者們學習利用目前(5.0.0)所有的元件(共30個)來打造一個具備設計質感後台網站(dsahboard),並完成一些簡單的頁面,並會進一步介紹功能強大好用的Angular CDK,時間允許的話,再介紹一些關於Angular Material的進階技巧!初步的規劃有如下3個單元:

  1. 完全掌握Angular Material(約20天):這段時間會介紹所有的Angular Material元件,並穿插在不同功能之中,除了設計一個基本的後台架構以外,也會設計出簡單的問卷表單、部落格和郵件收件夾的畫面,讓讀者能對所有的Angular Material元件都能夠有一定的掌握度,並懂得如何依照需求變化出不同的呈現方式。這個單元會切成5個子單元,分別是基礎篇、Dashboard篇、問卷表單篇、部落格篇和收件夾篇
  2. 介紹Angular CDK(約5~10天):Angular CDK(Component Development Kit)是Angular Material在設計元件時拉出來的共用程式,用來解決許多元件設計上的問題,幫助開發人員即使不使用Material Design,也能夠透過Angular CDK設計出高品質的元件或互動功能,元件開發工具(Component Development Kit)這個詞實在是當之無愧!在這單元中我們會透過Angular CDK來解決一些上個單元後台網站不足的部分,讓整個網站更加的豐富。
  3. 進階的Angular Material開發技巧(約5天,狀況允許的話能多寫就多寫):介紹一些客製化Angular Material的方式,除了直接使用Angular Material提供的元件以外,要讓網站具有Material Design的設計質感還有很多的方式,也會在這個單元一併介紹。

之後的程式碼將會統一放在GitHub上,並以天為單位建立分支(day-02, day-03, ...ect),方便大家隨時切換到每一天的記錄去了解程式碼的變化,相信對於學習會更有幫助。

討論是進步的起點

關於這系列的文章,是筆者個人對於Angular Material及Angular CDK研究後的整理,希望能幫助讀者更容易進入Angular Material的世界,如果有任何問題,歡迎隨時在留言提出討論,彼此學習,互相成長;若發現有任何詞句不順、錯別字、或是觀念錯誤等等,也一樣歡迎提出來,讓整個系列文章的完整度更高!幫助更多人進入這個美妙的世界!!

本日小結

今天的文章目標主要是讓大家對於Angular、Material Design及Angular Material有個初步的理解,Material Design本身是個非常棒的設計概念,以筆者有限的能力可能無法很完成的將精髓傳達給每個人,建議大家有空可以直接多去看看Material Design的設計風格,時間允許的話也可以大致瀏覽一下Material Design的設計準則,對於之後學習Angular Material開發時會更加的有感覺!

明天開始就讓我們前往高質感的前端設計之路邁進吧!!

後話

這次的鐵人賽很特別,雖然早就有參賽的打算,但對於這次新的玩法團體賽可以說是從來沒想過,收到Alan Liu哥邀請的時候,實在是受寵若驚XD;也因為加入了團隊,在賽前的討論也讓這次的參賽更加不寂寞,一群人相約在同一時間發文,並在群組內互相加油打氣(甚至定下懲罰條款XD),感覺實在是很好^^

希望未來的鐵人賽也能繼續加入這個制度,讓彼此在學習這條路上不寂寞。

/images/emoticon/emoticon12.gif

以下是這次參賽的團員,按照2018新年快樂團隊介紹的順序排列,歡迎大家訂閱他們的系列文章,給他們加油打氣!

本文章同步發表於: https://wellwind.idv.tw/blog/2017/12/19/angular-material-01-intro/


下一篇
[Angular Material完全攻略] Day 02 - 環境設定 & 安裝 & Hello World
系列文
Angular Material完全攻略34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言